<template>
  <el-container class="container" direction="vertical">
    <el-card class="box-card" :body-style="{padding: 0,height: '100%'}">
      <template #header>
        <div class="title-wrapper">
          <icon-font icon-class="afl-xuanze" :icon-style="{fontSize:'20px'}"></icon-font>
          {{
            title
          }}
        </div>
      </template>
      <el-empty :description="$t('mes.noDataYet')" v-if="processList.length == 0"/>

      <el-scrollbar style="height: 100%" v-else>
        <el-menu :default-active="active+''"
                 class="el-menu-vertical"
                 direction="vertical"
                 @select="menuSelect"
                 active-text-color="#fff"
        >
          <el-menu-item v-for="(item, index) in processList" :index="`${index}`" :key="index"
                        @click="changeTime(item)">
            <icon-font icon-class="afl-chanxianguanli"></icon-font>
            <span style="margin-left: 10px">{{ item.productionLineCode }}</span>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-card>
  </el-container>
</template>

<script>
import IconFont from '@/components/IconFont/iconFont'
import { getProcessLineById } from '@/api/mesApi'

let set1 = null
export default {
  name: 'processLine',
  components: { IconFont },
  data () {
    return {
      processList: [], // 所有产线
      active: 0,
      task: null,
      type: '',
      timeType: 1, // 判断时间的间隔
      count: 1, // 计数
      interval: 10000,
      watchCount: 0
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    processId: {
      type: String,
      default: ''
    },
    filter: { // 过滤
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    },
    frequency: { // 频率
      type: Array,
      default: () => []
    },
    currentLine: { // 当前生产产线，现场正在使用具体产线
      type: Array,
      default: () => []
    },
  },
  methods: {
    menuSelect (index) {
      this.active = index
      const item = this.processList[index]
      this.$emit('handle', item)
    },
    async getProcessLine () {
      const _this = this
      if (this.processId) {
        await getProcessLineById({
          processCode: this.processId,
          size: 100
        }).then(function (res) {
          const list = res.data.filter((item, index, arr) => {
            return _this.filter ? item.productionLineCode.includes(_this.filter) : true
          })
          _this.processList = [...list] // 产线数据
          // 加载成功后选择菜单
          if (list.length > 0) {
            _this.menuSelect(0)
            _this.type = _this.processList[0].productionLineCode
            console.log(_this.type)
          }
        }, function (e) {
          console.error(e)
          _this.processList.length = 0
        })
      } else {
        this.processList.length = 0
      }
    },
    // 改变时间间隔
    changeTime (item) {
      console.log('点击了事件', this.frequency)
      this.type = item?.productionLineCode
      this.timeType = 2
      this.count = 1
      clearInterval(set1) // 首先清除定时器
      if(this.frequency.length>0){
      this.interval = this.frequency[1].value * 1000
      set1 = setInterval(this.fn, this.interval) // 然后新建一个定时器
      }
    },
    fn () {
      const that = this
      // 当前运行的产线转换为数组
      const currentArr = []
      // 所有产线
      const processArr = []
      // 转换为数组
      that.currentLine?.forEach(itme => {
        currentArr.push(itme.productionLineCode)
      })
      that.processList?.forEach(a => {
        processArr.push(a?.productionLineCode)
      })
      if (that.count > 1) {
        clearInterval(set1) // 首先清除定时器
        this.interval = this.frequency[0].value * 1000
        set1 = setInterval(this.fn, this.interval) // 然后新建一个定时器
        that.timeType = 1
      }
      if (that.timeType === 2) { // 点击以后
        that.count += 1
      }
      // console.log(currentArr, processArr, that.type, '切换时间' + this.interval)
      if (!currentArr.length) {
        const index = processArr.indexOf(that.type)
        if (index === processArr.length || index === -1) {
          that.type = processArr[0]
          that.menuSelect(0)
        } else {
          const nextIndex = index + 1
          that.menuSelect(index)
          that.type = processArr[nextIndex]
        }
      } else {
        const index = currentArr.indexOf(that.type)
        if (index === currentArr.length || index === -1) {
          that.type = processArr[0]
          that.menuSelect(0)
        } else {
          const nextIndex = index + 1
          const itmeIndex = processArr.indexOf(that.type)
          that.menuSelect(itmeIndex)
          that.type = currentArr[nextIndex]
        }
      }
    }
  },
  watch: {
    frequency (newVal, oldVal) {
      if (newVal.length && oldVal.length && (newVal[0].value !== oldVal[0].value || newVal[1].value !== oldVal[1].value)) {
        this.interval = newVal[0].value * 1000
        clearInterval(set1) // 首先清除定时器
        set1 = setInterval(this.fn, this.interval) // 然后新建一个定时器
      }
      if (newVal.length && this.watchCount === 0) {
        this.watchCount += 1
        this.interval = newVal[0].value * 1000
        clearInterval(set1) // 首先清除定时器
        set1 = setInterval(this.fn, this.interval) // 然后新建一个定时器
      }
    }
  },
  mounted () {
    const _this = this
    if (this.processId || this.processId === null) {
      this.getProcessLine()
      if (!this.currentLine.length) { // 没有正在生产的产线
        console.log(!this.currentLine.length)
      } else {
        this.type = this.currentLine[0]
      }
      // setInterval(this.fn, this.interval) // 然后新建一个定时器
    }
    /* 如果是固定值 则直接渲染 */
    if (this.list.length > 0) {
      this.processList = [...this.list]
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;

  .box-card {
    height: 100%;

    .title-wrapper {
      //background: linear-gradient(90deg, #5171fd, #c97afd);
      //background: linear-gradient(90deg, #0081ff, #1cbbb4);
      //background: linear-gradient(90deg, #ea677c, #ef9b5f);
      background: linear-gradient(90deg, #3dadf6, #737bfc);
      font-size: var(--el-font-size-extra-large);
      line-height: 3;
      font-weight: bold;
      padding-left: 20px;
      color: white;
    }

    .el-menu-vertical {
      height: 100%;
    }

    .el-menu-item.is-active {
      //color: #409EFF;
      color: #fff;
      position: relative;
      //background-color: #e38139;
      //background: linear-gradient(90deg, #ea677c, #ef9b5f)
      //background: linear-gradient(90deg, #E9E9E9, #fff);
      //background: linear-gradient(90deg, #ea677c, #ef9b5f)
      background: linear-gradient(90deg, #42d79b, #a6e25f);
    }

    .el-menu-item.is-active:after {
      content: "";
      background: url("@/assets/hand.png") no-repeat 0 0;
      background-size: 100%;
      width: 30px;
      height: 30px;
      color: #409EFF;
      position: absolute;
      font-size: 30px;
      font-weight: 600;
      right: 20px;
    }

    .el-menu-item {
      font-weight: 800;
      border-bottom: 1px solid var(--el-border-color);;
    }
  }
}
</style>
